{extend name="../../admin/view/main"}

{block name="content"}

{if input('type') == 2}
<div class="layui-card-body">
    <div class="layui-form-item">
        <span class="color-desc margin-left-5">当前投资已匹配的债权</span>
        <table class="layui-table" id="property-table">
            <thead>
            <tr>
                <th class="nowrap text-center">债权名称</th>
                <th class="nowrap text-left">债权价值</th>
                <th class="nowrap text-left">债权已抵押价值</th>
                <th class="nowrap text-left">债权剩余可抵押价值</th>
                <th class="nowrap text-left">抵押该笔投资值</th>
            </tr>
            </thead>
            <tbody>
            {foreach $order_property as $k => $v}
            <tr>
                <td class="padding-0 text-center">{$v.property_name|default='--'}</td>
                <td class="padding-0 text-center">{$v.property_cost|default='0.00'}</td>
                <td class="padding-0 text-center">{$v.property_match_cost|default='0.00'}</td>
                <td class="padding-0 text-center">{$v.property_remain_cost|default='0.00'}</td>
                <td class="padding-0 text-center">{$v.current_cost|default='0.00'}</td>
                <td>
                    <a class="layui-btn layui-btn-sm del"  data-id="{$v.id}">解抵</a>
                </td>
            </tr>
            {/foreach}
            </tbody>
        </table>
    </div>
</div>
{/if}

{if input('type') == 1}
<div class='layui-form layui-card'>
    <div class="layui-card-body padding-20">
        <div class="layui-row layui-col-space10">
            <div class="layui-col-xs6">
                <div class="layui-textarea" style="height:360px;overflow:auto">
                    <div class="layui-row layui-col-space5">
                        <select name="modules" lay-verify="required" id="preperty_preview" lay-search="" lay-filter="preperty_preview">
                            <option value="">直接选择或搜索选择</option>
                            {notempty name="property_list"}
                            {foreach $property_list as $p}
                                <option value="{$p.id}" data-container="{$p|json_encode}">{$p.name}</option>
                            {/foreach}
                            {/notempty}
                        </select>

                        <table class="layui-table">
                            <colgroup>
                                <col width="100">
                                <col width="100">
                            </colgroup>
                            <tr>
                                <td>债权价值</td>
                                <td id="p_preview_cost"></td>
                            </tr>
                            <tr>
                                <td>已抵押价值</td>
                                <td id="p_preview_use_cost"></td>
                            </tr>
                            <tr>
                                <td>剩余可抵押价值</td>
                                <td id="p_preview_remain_cost"></td>
                            </tr>
                            <tr>
                                <td>抵押到期日期</td>
                                <td id="p_preview_date"></td>
                            </tr>
                            <tr>
                                <td> <span class="color-blue">请输入要匹配的价值</span> </td>
                                <td>
                                    <input type="text" id="p_match_value" class="layui-input text-center padding-left-0 border-0" data-blur-number="2" min="0">
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
            <div class="layui-col-xs6">
                <div class="layui-textarea" style="height:360px;overflow:auto">
                    <div>
                        当前已匹配
                    </div>
                    <hr class="hr-line-dashed margin-top-5 margin-bottom-5">
                    <table class="layui-table">
                        <colgroup>
                            <col width="100">
                            <col width="100">
                        </colgroup>
                        <tr>
                            <th><span class="color-green">债权名称</span></th>
                            <th><span class="color-green">匹配价值</span></th>
                        </tr>
                        {foreach $order_property as $val}
                        <tr>
                            <td>{$val.property_name}</td>
                            <td>{$val.current_cost}</td>
                        </tr>
                        {/foreach}
                    </table>
                    <label class="think-checkbox nowrap layui-elip">
                    </label>
                </div>
            </div>
            <div class="layui-form-item text-center">
                {notempty name='vo.id'}<input name="id" id="order_id" type="hidden" value="{:input('id')}">{/notempty}
                <button class="layui-btn" onclick="confirmProperty()">确定选择</button>
            </div>
        </div>
    </div>
</div>
{/if}

{/block}


{block name='script'}

<script>
    /*! 表单初始化 */

    var checkProperty = [];
    var _rule = {};

    window.form.render();

    $('body').on('click', '.del', function() {
        let tr = $(this)

        $.post("{:url()}?type=2", {id:$(this).attr('data-id')}, function (data){
            if (data.code == 1){
                tr.closest('tr').remove();
                layer.msg(data.info)
            }else {
                layer.msg(data.info)
            }
        })
    });

    form.on('select(preperty_preview)', function (data){
        let p_id = data.value;
        let propertyData = $("#preperty_preview option:selected").attr('data-container');

        console.log(propertyData)

        let proObj = JSON.parse(propertyData);

        _rule = proObj;

        let remainCost = proObj.cost  - proObj.match_cost;

        _rule.remain_cost = parseFloat(remainCost).toFixed(2)

        rebuildPropertyPreview(proObj.cost, proObj.match_cost, proObj.date)
    });

    function rebuildPropertyPreview(cost = 0.00, match_cost = 0.00, date = ''){
        $("#p_preview_cost").text(cost);
        $("#p_preview_use_cost").text(match_cost);
        let remain = parseFloat(cost  - match_cost).toFixed(2)
        $('#p_preview_remain_cost').text(remain);
        $('#p_preview_date').text(date);
        $("#p_match_value").attr('data-value-max', remain)
        form.render('select')
    }


    function confirmProperty(){

        if (_rule.id == '' || _rule == undefined){
            layer.msg('无效的债权，请重试');
            return false;
        }

        let params = {'property_id':_rule.id, 'id':$("#order_id").val(), 'match_cost':$("#p_match_value").val()}

        $.post("{:url()}?type={:input('type')}", params, function (data){
            if (data.code == 1){
                $("#preperty_preview").empty();
                layer.msg(data.info)
                setTimeout(()=>{
                    layer.closeAll();
                },1000*3)
            }else {
                layer.msg(data.info)
            }

            form.render('select')
        })
    }
</script>
{/block}